'HTML stands for Hypertext Markup Language. HTML is the page layout standard used by the World Wide Web. The current version of HTML is 2.0 but extensions such as tables and floating graphics are also in use. Use a web browser such as Netscape Navigator, NCSA Mosaic, or Lynx to view HTML files.
##What is MTX?
'MTX is a simplified means for creating HTML documents. The MTX format is easy to learn and use. You can create MTX formatted files with any word processor or text editor. The MTX Tool converts these files into HTML pages in a matter of seconds.
##How to use this guide?
'This guide presents the basics of both HTML and MTX in a simple tutorial format. Each section (delimited by double horizontal lines) introduces a basic HTML concept followed by the equivalent MTX syntax. You may wish to copy and paste the examples into your own files and experiment with the concepts being presented. By the end of this exercise you should be able to create your own Web pages using either plain HTML or MTX.
-----
-----
#To Begin...
HTML files are nothing other than plain text files containing a series of page formatting tags. Tags consist of a less than sign (<), the tag name, and a greater than sign (>). "<TITLE>" is an example of a tag. Most tags have a complementary closing tag with an added slash character (/). "</TITLE>" is an example of a closing tag. Pairs of tags are used to enclose page elements such as the title of the page. HTML files have two major parts, the head and body, identified by the "<HEAD>" and <BODY> tags respecitively. The head contains the title and other information about the page. A properly formed HTML file also begins with the "<HTML>" tag and ends with "</HTML>". Here is an example:
= <HTML>
= <HEAD>
= <TITLE>Basic HTML Page</TITLE>
= </HEAD>
= <BODY>
=
= Empty for now...
=
= </BODY>
= </HTML>
-----
MTX takes care of all of these details for you. One line of MTX is all you need to create the basic HTML file shown above:
= %TITLE Basic HTML Page
=
= Empty for now...
=
-----
-----
#Adding Some Content
Now let's add some text to the body of the HTML document.
= <HTML>
= <HEAD>
= <TITLE>Basic HTML Page</TITLE>
= </HEAD>
= <BODY>
= This is a short paragraph to demonstrate how HTML handles text.
= The most important thing to note is that extra space ,
= tab, and return characters are ignored by HTML.
=
= The blank line above will become a single space when displayed.
= </BODY>
= </HTML>
-----
Here's the next difference between HTML and MTX, in MTX blank lines are used to delimit paragraphs. Extra spaces and tabs are ignored just as with HTML.
= %TITLE Basic HTML Page
=
= This is a short paragraph to demonstrate how MTX handles text.
= Blank lines are used to delimit paragraphs.
=
= The blank line above will force a paragraph break before this line.
-----
-----
#Paragraphs
HTML treats all text as one continuous paragraph until it comes to a paragraph "<P>" tag. By adding a "<P>" we divide the body of this page into two paragraphs.
= <HTML>
= <HEAD>
= <TITLE>Basic HTML Page</TITLE>
= </HEAD>
= <BODY>
= This is a short paragraph to demonstrate how HTML handles text.
= The most important thing to note is that extra space ,
= tab, and return characters are ignored by HTML.<P>
=
= The blank line above will become a single space when displayed.
= </BODY>
= </HTML>
-----
Our paragraphs are already defined...
= %TITLE Basic HTML Page
=
= This is a short paragraph to demonstrate how MTX handles text.
= Blank lines are used to delimit paragraphs.
=
= The blank line above will force a paragraph break before this line.
-----
-----
#Headings and Sections
'Heading tags can be used to give structure to a page. Headings come in different "sizes" from 1 to 6. It is good practice to use the the top level heading "<H1>" to repeat the page title at the beginning of the body. Major sections should use "<H2>" headings, subsections "<H3>" headings, and so on.
= <HTML>
= <HEAD>
= <TITLE>Basic HTML Page</TITLE>
= </HEAD>
= <BODY>
= <H1>Basic HTML Page</H1>
= This is a short paragraph to demonstrate how HTML handles text.
= The most important thing to note is that extra space ,
= tab, and return characters are ignored by HTML.<P>
=
= The blank line above will become a single space when displayed.
=
= <H2>Second Section</H2>
=
= Empty for now...
=
= <H2>Third Section</H2>
=
= Empty for now...
=
= </BODY>
= </HTML>
-----
MTX automatically supplies the top level heading for the page from the "%TITLE" tag. Section headings are defined by adding a pound sign (#) to the heading text. As an added benefit, MTX will automatically create a table of contents for the page based on the section headings.
= %TITLE Basic HTML Page
=
= This is a short paragraph to demonstrate how MTX handles text.
= Blank lines are used to delimit paragraphs.
=
= The blank line above will force a paragraph break before this line.
=
= #Second Section
=
= Empty for now...
=
= #Third Section
=
= Empty for now...
=
-----
-----
#Adding Pictures
HTML documents can include pictures stored as separate files. These pictures are inserted in the text by the image "<IMG>" tag. This tag is unusual in that there is {*no*} closing "</IMG>" tag. The name of the picture file is included as part of the tag itself, in this case "picture.gif".
= <HTML>
= <HEAD>
= <TITLE>Basic HTML Page</TITLE>
= </HEAD>
= <BODY>
= <H1>Basic HTML Page</H1>
= This is a short paragraph to demonstrate how HTML handles text.
= The most important thing to note is that extra space ,
= tab, and return characters are ignored by HTML.<P>
=
= The blank line above will become a single space when displayed.
=
= <H2>Second Section</H2>
=
= <IMG SRC="picture.gif">
=
= <H2>Third Section</H2>
=
= Empty for now...
=
= </BODY>
= </HTML>
-----
The MTX approach to pictures is a bit simpler. The "≤=" and "=≥" tags are used to surround the name of the picture. Since the picture file is already known to be a GIF, the ".gif" extension is omitted.
= %TITLE Basic HTML Page
=
= This is a short paragraph to demonstrate how MTX handles text.
= Blank lines are used to delimit paragraphs.
=
= The blank line above will force a paragraph break before this line.
=
= #Second Section
=
= ≤=picture=≥
=
= #Third Section
=
= Empty for now...
=
-----
-----
#Hypertext Links
Now we are ready to add hypertext links to our file. The "<A>" anchor tags are used to enclose text (or images) to make "hot spots" in the document. Hot spots are indicated by color or other highlighting. Additional information about the link must appear just after the opening "<A>" tag. This usually takes the form of "HREF=URL" where URL is an address (in quotes) for the hypertext jump. The first example shows a hypertext link to a local file "example1.html" in the {*same*} directory as this one. The second example shows the use of a complete URL for both the hot text and link address.
= <HTML>
= <HEAD>
= <TITLE>Basic HTML Page</TITLE>
= </HEAD>
= <BODY>
= <H1>Basic HTML Page</H1>
= This is a short paragraph to demonstrate how HTML handles text.
= The most important thing to note is that extra space ,
= tab, and return characters are ignored by HTML.<P>
=
= The blank line above will become a single space when displayed.
=
= <H2>Second Section</H2>
=
= <IMG SRC="picture.gif">
=
= <H2>Third Section</H2>
=
= This is a <A HREF="example1.html">link</A> to an example file.<P>
=
= The MTX home page is located at: <A HREF="http://www.med.ufl.edu/medinfo/mtx/">http://www.med.ufl.edu/medinfo/mtx/</A>
=
= </BODY>
= </HTML>
-----
MTX fixes several flaws with HTML "anchors." First, the syntax is simpler and easier to read--hypertext links are delimited by "≤#" and "#≥" tags. Second, the destination address comes after the link text. This is a more natural way to think about hypertext and adds to readability. Finally, redundant information is removed when using URLs or email addresses as links. Notice the brevity of the second hypertext example shown below. The "##" tells MTX to repeat the link text as the destination address.
= %TITLE Basic HTML Page
=
= This is a short paragraph to demonstrate how MTX handles text.
= Blank lines are used to delimit paragraphs.
=
= The blank line above will force a paragraph break before this line.
=
= #Second Section
=
= ≤=picture=≥
=
= #Third Section
=
= This is a ≤#link#example1.html#≥ to an example file.
=
= The MTX home page is located at: ≤#http://www.med.ufl.edu/medinfo/mtx/##≥
=
-----
-----
#Conclusion
'During this exercise we have created two parallel example files--one using {#plain HTML#example1.html#} and the other using {#MTX#example2.mtx#} to generate {#HTML#example2.html#}. Notice that the MTX example contains an interactive table of contents. Creating a table of contents in plain HTML is left as an exercise for the reader.
##Further Reading
{#A Beginner's Guide to HTML#http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html#}
{#Design Considerations for HTML Documents#design.html#}
-----
MTX was developed by {#Richard Rathe, MD#http://www.med.ufl.edu/medinfo/people/rathe.html#}, Director of the {#Office of Medical Informatics#http://www.med.ufl.edu/medinfo/#} for the College of Medicine at the University of Florida. {*The MTX format, documentation, and tools are Copyright 1995 and 1996 by the University of Florida.*} MTX is available without charge for non-commercial use at {#http://www.med.ufl.edu/medinfo/mtx/##}. All copyright and authorship notices must remain in place.
